<template>
  <!-- 各科室人员经费列表 -->
  <!-- {
        text: '导出',
        type: 'info',
        icon: 'export',
        trigger: 'export',
      }, -->
  <Drawer
    title="详情"
    :visible="fundsPerDetailsVisible"
    :header-color="'#e7ecf8'"
    width="80%"
    :footer-btns="[
      {
        text: '取消',
        type: 'info',
        trigger: 'cancel',
      },
    ]"
    @cancel="cancel"
    @print="print"
    @export="exportBtn"
  >
    <div class="drawer-box">
      <div class="box-title">人员经费列表</div>
      <div class="box-table">
        <el-table
          v-loading="tableLoading"
          :data="tableRyjfData"
          border
          :header-cell-style="{
            background: '#fafafa',
            borderColor: '#e7ecf8',
            color: '#555555',textAlign:'center'
          }"
          header-row-class-name="ck-table-header"
          row-class-name="ck-table-row"
          size="small"
          height="100%"
          style="width: 100%"
          row-key="code"
          show-summary
          :summary-method="getSummaries"
        >
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="60"
          />
          <el-table-column prop="deptCode" label="科室代码">
            <!-- <template slot-scope="scope">
              <div class="text-btn" @click="handleDept(scope.row)">
                {{ scope.row.deptCode }}
              </div>
            </template> -->
          </el-table-column>
          <el-table-column prop="deptName" label="科室名称" />
          <el-table-column label="薪酬" prop="salaryAmount" align="right">
            <template slot-scope="scope">
              <div class="text-btn" @click="handleSalary(scope.row)">
                {{ scope.row.salaryAmount |numberToCurrency }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="其他" prop="performanceAmount" align="right">
            <template slot-scope="scope">
              <div class="text-btn" @click="handleAchievements(scope.row)">
                {{ scope.row.performanceAmount |numberToCurrency }}
              </div>
            </template>
          </el-table-column>
          <!-- <template v-for="(item, index) in tableRyJfCol">
            <el-table-column :label="item.name" :key="index">
              <template v-slot="scope">
                <div
                  class="text-btn"
                  @click="handleChildDeptJf(scope.row, item.acCode,item.name)"
                >
                  {{ scope.row.accParam[item.acCode] }}
                </div>
              </template>
            </el-table-column>
          </template> -->
        </el-table>
        <!-- <div class="pagenation-box">
          <el-pagination
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div> -->
      </div>
    </div>

    <!-- 人员经费-薪酬 -->
    <salaryDrawer
      v-if="salaryVisible"
      :salary-visible="salaryVisible"
      :table-ry-jf-col="tableSalaryColumn"
      :table-data-list="tableSalaryData"
      @handleSalaryClose="handleSalaryClose"
    />

    <!-- 人员经费-绩效 -->
    <AchievementsDrawer
      v-if="achievementsVisible"
      :achievements-visible="achievementsVisible"
      :table-data-list="tableAchievementsData"
      @handleAchievementsClose="handleAchievementsClose"
    />

    <!-- 人员经费-科室 -->
    <childDeptJF
      v-if="deptVisible"
      :dept-visible="deptVisible"
      :table-data-list="rjdeptTable"
      @handleCoseDept="handleCoseDept"
    />

    <!-- 其他列的费用 -->
    <JfRelationChildFee
      v-if="otherFeeVisible"
      :dept-visible="otherFeeVisible"
      :table-data-list="otherFeeData"
      :other-title="otherTitle"
      @handleCoseDept="hanldeCloseOtherFee"
    />

    <InPostPerDetails
      ref="manual"
      :in-post-per-details-visible="InPostPerDetailsVisible"
      @perDetails="perDetails"
    />
    <HygieneDetails
      ref="manual"
      :hygiene-details-visible="HygieneDetailsVisible"
      @hygieneDetails="hygieneDetails"
    />
  </Drawer>
</template>
<script>
import InPostPerDetails from '../perMonthDrawer/InPostPerDetails.vue'
import HygieneDetails from '../perMonthDrawer/HygieneDetails.vue'
import childDeptJF from '../perMonthDrawer/childDeptJF.vue'
import JfRelationChildFee from '../perMonthDrawer/jfRelationChildFee.vue'
import salaryDrawer from '@/pages/analysisReport/component/salaryDrawer'
import AchievementsDrawer from '@/pages/analysisReport/component/achievementsDrawer'
import {
  listSalaryByPDeptCodeAndDeptCode,
  listSalaryByDeptAndAccId,
  listCostItemByDate,
  listSalaryDetailByDateAndPDeptAndDept,
  listPerformanceDetailByDateAndPDeptAndDept
} from '@/utils/apis/report'
export default {
  components: {
    InPostPerDetails,
    HygieneDetails,
    childDeptJF,
    JfRelationChildFee,
    salaryDrawer,
    AchievementsDrawer
  },
  inject: ['tableRoot'],
  props: {
    // 接收父组件传来的值
    fundsPerDetailsVisible: Boolean,
    tableRyJfCol: {
      type: Array,
      default: () => []
    },
    tableRyjfData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      achievementsVisible: false,
      tableAchievementsData: [],
      salaryVisible: false,
      tableSalaryColumn: [],
      tableSalaryData: [],
      total: 0,
      pageSize: 20,
      currentPage: 1,
      tableLoading: false,
      InPostPerDetailsVisible: false, // 人员经费
      HygieneDetailsVisible: false, // 卫生材料费
      deptVisible: false, // 科室
      rjdeptTable: [],
      otherFeeVisible: false,
      otherFeeData: [],
      otherTitle: ''
    }
  },
  methods: {
    handleSalary(row) {
      // 薪酬
      this.salaryVisible = true
      const startEnd = this.tableRoot.newParamList.yearMonth
      const param = {
        starYear: startEnd[0].split('-')[0],
        starMonth: startEnd[0].split('-')[1],
        endYear: startEnd[1].split('-')[0],
        endMonth: startEnd[1].split('-')[1]
      }
      // if(Array.isArray(startEnd)){
      //  param = {
      //     starYear: startEnd[0].split('-')[0],
      //     starMonth: startEnd[0].split('-')[1],
      //     endYear: startEnd[1].split('-')[0],
      //     endMonth: startEnd[1].split('-')[1]
      //   }
      // }else {
      //  param =  {
      //     starYear:  startEnd.split('-')[0],
      //     starMonth:  startEnd.split('-')[1],
      //     endYear:  startEnd.split('-')[0],
      //     endMonth: startEnd.split('-')[1]
      //   }
      // }
      listCostItemByDate(param).then((res) => {
        if (res.data.code === 200) {
          this.tableSalaryColumn = res.data.data
        }
      })
      listSalaryDetailByDateAndPDeptAndDept(
        param,
        this.tableRoot.deptCode,
        row.deptCode
      ).then((res) => {
        if (res.data.code === 200) {
          this.tableSalaryData = res.data.data
        }
      })
    },
    formatNumber(n) {
      n = n.toString()
      return n[1] ? n : `0${n}`
    },
    handleAchievements(row) {
      // 绩效
      this.achievementsVisible = true
      const startEnd = this.tableRoot.newParamList.yearMonth
      const param = {
        starYear: startEnd[0].split('-')[0],
        starMonth: startEnd[0].split('-')[1],
        endYear: startEnd[1].split('-')[0],
        endMonth: startEnd[1].split('-')[1]
      }
      // if(Array.isArray(startEnd)){
      //  param = {
      //     starYear: startEnd[0].split('-')[0],
      //     starMonth: startEnd[0].split('-')[1],
      //     endYear: startEnd[1].split('-')[0],
      //     endMonth: startEnd[1].split('-')[1]
      //   }
      // }else {
      //  param =  {
      //     starYear:  startEnd.split('-')[0],
      //     starMonth:  startEnd.split('-')[1],
      //     endYear:  startEnd.split('-')[0],
      //     endMonth: startEnd.split('-')[1]
      //   }
      // }
      listPerformanceDetailByDateAndPDeptAndDept(
        param,
        this.tableRoot.deptCode,
        row.deptCode
      ).then((res) => {
        if (res.data.code === 200) {
          this.tableAchievementsData = res.data.data
        }
      })
    },
    handleChildDeptJf(row, accId, title) {
      this.otherTitle = title
      this.otherFeeVisible = true
      const date = this.tableRoot.newParamList.yearMonth
      // const year =
      //   this.tableRoot.newParamList.yearMonth &&
      //   this.tableRoot.newParamList.yearMonth.substr(0, 4);
      // const month =
      //   this.tableRoot.newParamList.yearMonth &&
      //   this.tableRoot.newParamList.yearMonth.substr(5);
      const param = {
        // month: month,
        // year: year,
        yard: '1',
        starYear: this.$moment(date[0]).format('YYYY'),
        endYear: this.$moment(date[1]).format('YYYY'),
        starMonth: this.$moment(date[0]).format('MM'),
        endMonth: this.$moment(date[1]).format('MM')
      }
      listSalaryByDeptAndAccId(
        param,
        this.tableRoot.deptCode,
        row.deptCode,
        accId
      ).then((res) => {
        if (res.data.code === 200) {
          this.otherFeeData = res.data.data
        }
      })
    },
    handleCoseDept(item) {
      this.deptVisible = item.deptVisible
    },
    handleSalaryClose() {
      this.salaryVisible = false
    },
    hanldeCloseOtherFee(item) {
      this.otherFeeVisible = item.deptVisible
    },
    // 科室代码
    handleDept(row) {
      this.deptVisible = true
      const date = this.tableRoot.newParamList.yearMonth
      // const year =
      //   this.tableRoot.newParamList.yearMonth &&
      //   this.tableRoot.newParamList.yearMonth.substr(0, 4);
      // const month =
      //   this.tableRoot.newParamList.yearMonth &&
      //   this.tableRoot.newParamList.yearMonth.substr(5);
      const param = {
        // month: month,
        // year: year,
        yard: '1',
        starYear: this.$moment(date[0]).format('YYYY'),
        endYear: this.$moment(date[1]).format('YYYY'),
        starMonth: this.$moment(date[0]).format('MM'),
        endMonth: this.$moment(date[1]).format('MM')
      }
      listSalaryByPDeptCodeAndDeptCode(
        param,
        this.tableRoot.deptCode,
        row.deptCode
      ).then((res) => {
        if (res.data.code === 200) {
          this.rjdeptTable = res.data.data
        }
      })
    },
    // 关闭抽屉
    cancel() {
      this.$emit('fundsPerDetails', { fundsPerDetailsVisible: false })
    },
    // 导出
    exportBtn() {
      console.log('导出')
    },
    // 打印
    print() {
      console.log('打印')
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this._getData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this._getData()
    },
    // 指定列求和
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        if (index >= 3) {
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
            // sums[index] += " 元";
          } else {
            sums[index] = 'N/A'
          }
        }
      })
      return sums
    },
    // 人员经费详情
    btnPerDetails() {
      this.InPostPerDetailsVisible = true
    },
    perDetails(params) {
      this.InPostPerDetailsVisible = params.InPostPerDetailsVisible
    },
    handleAchievementsClose() {
      this.achievementsVisible = false
    },
    // 卫生材料费详情
    btnHygieneDetails() {
      this.HygieneDetailsVisible = true
    },
    hygieneDetails(params) {
      this.HygieneDetailsVisible = params.HygieneDetailsVisible
    }
  }
}
</script>
<style lang="less" scoped>
.el-table--mini,
.el-table--small,
.el-table__expand-icon {
  font-size: 14px !important;
}

.ck-table-header {
  th {
    background: #fafafa !important;
    height: 48px;
    color: #555555 !important;
  }
}
.pagenation-box {
  display: flex;
  padding-top: 2px;
  justify-content: flex-end;
}
.drawer-box {
  height: 100%;
}
.box-title {
  height: 44px;
  background: #f6f9fe;
  border-bottom: 1px solid #e7ecf8;
  font-size: 16px;
  color: #555555;
  line-height: 44px;
  padding-left: 10px;
  box-sizing: border-box;
}
.box-table {
  padding: 14px 10px 14px 10px;
  height: calc(100% - 78px);
  box-sizing: border-box;
}
.text-btn {
  color: #2165f9;
  border-bottom: 1px solid #2165f9;
  display: inline-block !important;
  cursor: pointer;
}
</style>
